<!DOCTYPE html>
<html>
<head>
    <title>Webix Editable Table Demo</title>
    <link rel="stylesheet" href="css/webix.css">
    <script src="js/webix.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #main_area {
            width: 100%;
            height: 100%;
            border: 2px solid #333; /* 添加外边框 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="main_area"></div>

    <script>
        webix.ready(function(){
            webix.ui({
                container: "main_area",
                view: "datatable",
                editable: true,  // 启用表格编辑
                editaction: "click", // 单击单元格开始编辑
                columns: [
                    { id: "id",  header: "ID",   width: 50, editor: "text"  },
                    {  id: "title", header: "Book Title", fillspace: true, editor: "text"},
                    {  id: "author", header: "Author",width: 200, editor: "text" },
                    { 
                        id: "year", 
                        header: "Year", 
                        width: 80,
                        editor: "text",
                        validate: webix.rules.isNumber // 验证数字输入
                    }
                ],
                data: [
                    { id: 1, title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: 1925 },
                    { id: 2, title: "1984", author: "George Orwell", year: 1949 },
                    { id: 3, title: "Brave New World", author: "Aldous Huxley", year: 1932 }
                ],
                rules: {
                    year: function(value){
                        return value > 1900 && value < 2024; // 自定义验证规则
                    }
                },
                on: {
                    onAfterEditStop: function(state, editor, ignoreUpdate){
                        if(!state.value && state.old){
                            this.refreshEditor(); // 保留原始值如果新值无效
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>